<template>
	<view>
		<uni-nav-bar
		statusBar="true" 
		:fixed="true" 
		backgroundColor="#eff3f7"
		leftIcon="back"
		@click-left="clickLeft"
		:title="i18n.addressList"
		:rightText="i18n.add"
		@click-right="jumpAdd"
		:border="false">
		</uni-nav-bar>
		<view class="content">
			<template v-if="list.length>0"> 
				<block v-for="(item,index) in list" :key="index">
					<view class="list" @tap="jump(item,index)">
						<image :src="item.logo" mode="widthFix" lazy-load></image>
						<view class="address">
							<text>{{i18n.remark}} {{item.tag}}</text>
							<view>
								{{item.address}}
							</view>
						</view>
						<view class="del" @tap.stop="del(index)">
							<uni-icon
							type="trash" 
							color="#007AFF" 
							size="24"></uni-icon>
						</view>
					</view>
				</block>
			</template>
			
			<template v-if="list.length>10">
				<view class="more" >
					{{loadtext}}
				</view>
			</template>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Load from '@/components/common/load.vue';
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters,mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {    
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType'
			])
		},
		components:{
			uniNavBar,
			uniIcon,
			Load
		},
		data() {
			return {
				showLoad:false,
				token_id:'',
				title_en:'',
				coinItem:'',
				page:1,
				loadtext:'上拉加载更多',
				list:[],
				isClick:false
			}
		},
		onLoad(e){
			this.loadtext = this.i18n.mores;
			if(e.item){
				this.coinItem = e.item;
				let {balance,fee,financial,freeze,giving,height,id,price,title_en,txmini,txsxf,usd,usd_price,zdf} = JSON.parse(e.item)
				this.token_id = id;
				this.title_en = title_en;
			}
			this.getAddressList();
		},
		onReachBottom(){
			//触底加载更多
			this.getAddressLists() 
		},
		onPullDownRefresh(){
			//上拉刷新
			this.page = 1;
			this.list = [];
			this.getAddressList()
		},
		methods:{
			...mapMutations([
				'setCoin'
			]),
			jump(item,index){
				this.setCoin('');
				this.setCoin(item);
				uni.navigateBack({
					delta:1
				});
			},
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			},
			jumpAdd(){
				uni.navigateTo({
					url:`/pages/wallet/add-address?item=${this.coinItem}`
				})
			},
			del(index){
				if(this.isClick){ return }
				let _this = this;
				_this.isClick = true
				let _url = _this.getRequestUrl+'/api/wallet/delAddr';
				let _data ={
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					addid:this.list[index].id,
					lang_type:this.getLangType
				}
				uni.showModal({
					title: _this.i18n.delete,
					content: _this.i18n.areYouCurrentAddress,
					success:(res)=>{
						if (res.confirm) {	
							// uni.showLoading()
							_this.showLoad = true;
							fetch(_url,_data,"POST").then(res=>{
								_this.isClick = false
								// uni.hideLoading()
								_this.showLoad = false;
								if(res.data.code){
									_this.list.splice(index,1)
									showToast(res.data.msg);
								}else{
									showToast(res.data.msg)
								}
							})
						} else if (res.cancel) {
							_this.isClick = false
							//console.log('用户点击取消');
						}
					}
				});
				
			},
			getAddressList(){
				let url = this.getRequestUrl +'/api/wallet/addrList';
				let data = {
					id        : this.getLoginInfo.id,
					token     : this.getLoginInfo.token,
					token_id  : this.token_id,
					rows      : 10,
					page      : this.page,
					lang_type : this.getLangType=='en'?2:1
				}
				// uni.showLoading()
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					// uni.hideLoading()
					this.showLoad = false;
					if(res.data.data.data.lenght>0){
						this.loadtext = this.i18n.nodata;
						return
					}
					if(res.data.code ==1){
						let list = res.data.data.data;
						this.list = list.filter(item=>{
							return item.title_en == this.title_en;
						})
						this.page ++;
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					this.showLoad = false;
					console.log(err);
				})
			},
			getAddressLists(){
				let url = this.getRequestUrl +'/api/wallet/addrList';
				let data = {
					id        : this.getLoginInfo.id,
					token     : this.getLoginInfo.token,
					rows      : 10,
					page      : this.page,
					lang_type : this.getLangType
				}
				// uni.showLoading()
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					this.showLoad = false;
					if(res.data.data.data.lenght>0){
						this.loadtext = this.i18n.nodata;
						return
					}
					if(res.data.code==1){
						this.page ++;
						this.loadtext = this.i18n.mores
						let list = res.data.data.data;
						let lists = list.filter(item=>{
							return item.title_en == this.title_en;
						})
						this.list = this.list.concat(lists);
					}else if(res.data.code ==2){
						showToast(res.data.msg)
						uni.navigateTo({
							url:"/pages/new-login/new-login"
						})
					}
				}).catch(err=>{
					this.showLoad = false;
					console.log(err);
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #eff3f7;
	}
</style>
<style lang="scss" scoped>
	.content{
		padding:30upx;
		.more{
			text-align: center;
			font-size: 26upx;
			color: #999999;
			line-height: 60upx;
		}
		.list{
			background-color: #FFFFFF;
			border-radius:10upx;
			padding:15upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20upx;
			image{
				width: 48upx;
				height: 48upx;
				margin-right: 30upx;
				flex-shrink: 0;
			}
			.address{
				flex: 1;
				text{
					color: #999999;
					font-size:22upx;
				}
				view{
					margin-top: 15upx;
					width: 90%;
					white-space:normal;
					word-break:break-all;
					overflow:hidden;
					line-height: 34upx;
				}
			}
		}
	}
</style>
